<!--
 * @Description:  newzhike- topHeader
 * @Author: your name
 * @Date: 2024-02-20
 * @LastEditTime: 2024-02-20
 * @LastEditors: Please set LastEditors
-->

<template>
  <div :id="[this.$route.name]">
    <div id="topHeader">
      <div class="wrapper_t heart_w">
        <div class="left">
          <router-link to="/" class="logo" target="_blank">
            <img src="@/assets/images/logo.png" alt="" />
          </router-link>
          <div class="nav">
            <!-- <router-link
              to="/newzhike/courseOutline"
              tag="li"
              v-for="(item, i) in titleList"
              :key="i"
            >
              <img :src="item.image" alt="" />
              <span>{{ item.name }}</span>
            </router-link> -->
            <router-link to="/newzhike/courseOutline" tag="li">
              <img src="@/assets/images/logo_kcdg.png" alt="" />
              <span>课程大纲</span>
            </router-link>
            <router-link to="/newzhike/studyPlan" tag="li">
              <img src="@/assets/images/logo_xxjh.png" alt="" />
              <span>学习计划</span>
            </router-link>
            <router-link to="/newzhike/questionBank" tag="li">
              <img src="@/assets/images/logo_tk.png" alt="" />
              <span>题库</span>
            </router-link>
            <router-link to="/newzhike/studyReport" tag="li">
              <img src="@/assets/images/logo_xxbg.png" alt="" />
              <span>学习报告</span>
            </router-link>
            <router-link to="/newzhike/answerQuestion" tag="li">
              <img src="@/assets/images/logo_bjdy.png" alt="" />
              <span>笔记答疑</span>
            </router-link>
            <router-link to="/newzhike/dataDownload" tag="li">
              <img src="@/assets/images/logo_zlxz.png" alt="" />
              <span>资料下载</span>
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 二级路由 -->
    <router-view></router-view>
  </div>
</template>

<script>
import { getMenu } from '@/api/newzhike/common.js'
export default {
  name: 'newzhike',
  data() {
    return {
      titleList: []
    }
  },
  created() {
    this.geTabHeaderTitle()
  },
  mounted() {},
  methods: {
    async geTabHeaderTitle() {
      // 智课tabs菜单
      const { data: data } = await getMenu({ combo_id: 1 })
      this.titleList = data.data
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';

#topHeader {
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 4px 0 hsl(0deg 0% 91% / 70%);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.wrapper_t {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    display: flex;
    align-items: center;
  }
  .logo {
    height: 60px;
    display: flex;
    align-items: center;
    margin-right: 50px;
    img {
      width: 140px;
      height: auto;
    }
  }
}

#topHeader .wrapper_t {
  .left {
    .nav {
      display: flex;
      align-items: center;
      height: 40px;
      line-height: 40px;
      li {
        display: flex;
        align-items: center;
        margin-right: 38px;
        cursor: pointer;
        img {
          width: 22px;
          height: 22px;
          margin-right: 10px;
        }
        span {
          font-size: 16px;
          color: $color-black;
        }
      }
      li.router-link-active {
        span {
          color: #0193ff;
        }
      }
    }
  }
  .right {
    display: flex;
    align-items: center;
    img {
      width: 20px;
      height: 24px;
      margin-right: 15px;
    }
    li {
      font-size: 16px;
      color: #000000;
      cursor: pointer;
    }
  }
}
</style>
